
// react
import React, { useState } from "react";
// lib
import { Layout, Card, Form, Button, Input } from "antd";
import { UserOutlined, LockOutlined, PictureOutlined } from "@ant-design/icons";
import { Navigate } from "react-router-dom";
// components & widget
// style
import "./style.scss";
// config
import { MODAL_STYLE, ROUTE_LOGIN_VIEW } from "project/config";
import { NAME_LENGTH_RULE, PWD_LENGTH_RULE } from "project/validRules";
import { REQUIRED_RULE, verifyIdentityNo, verifyMobile } from "utils/validator";
// script & methods & public
// store
import { observer } from "mobx-react";
// controller
import { getCodeService } from "biz/Auth/service";
import { userRegister } from "./controller";
// interface
// 其它

function Register() {
  const [form] = Form.useForm();
  const [registed, setregisted] = useState(false);
  const [code, setCode] = useState(getCodeService());
  const [loading, setLoading] = useState(false);
  const getCode = () => {
    const co = getCodeService();
    setCode(co);
  };

  const handleOk = async () => {
    setLoading(true)
    const result = await form.validateFields();
    const re = await userRegister(result, setLoading,
      getCode,)
    setregisted(re);
  };
  if (registed) {
    return <Navigate to={`/${ROUTE_LOGIN_VIEW}`} replace={true} />;
  }
  return (
    <Layout className="register-view">
      <Card bordered hoverable className="register-card">
        <h1 className="system-name">读者注册 </h1>
        <Form {...MODAL_STYLE.FORM_6_18} name="registerForm" size="large" form={form} onFinish={handleOk}>
          <Form.Item name="userName" label="登陆账号" rules={[REQUIRED_RULE("请输入账号"), NAME_LENGTH_RULE]}>
            <Input prefix={<UserOutlined />} placeholder={`账户名, ${NAME_LENGTH_RULE.message}`}maxLength={NAME_LENGTH_RULE.max}allowClear/>
          </Form.Item>
          <Form.Item name="password"label="登陆密码"rules={[REQUIRED_RULE("请输入密码"), PWD_LENGTH_RULE]}>
            <Input.Password prefix={<LockOutlined />} placeholder={`输入密码, ${PWD_LENGTH_RULE.message}`} maxLength={PWD_LENGTH_RULE.max}allowClear/>
          </Form.Item>
          <Form.Item name="repassword"label="再次输入密码"rules={[REQUIRED_RULE("请再次输入密码"), ({ getFieldValue }) => ({validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入的密码不一致！'));},
            }),]}>
            <Input.Password prefix={<LockOutlined />}placeholder={`输入密码, ${PWD_LENGTH_RULE.message}`}maxLength={PWD_LENGTH_RULE.max}allowClear/>
          </Form.Item>
          <Form.Item name="fullName"label="用户姓名"rules={[REQUIRED_RULE("请填写真实姓名"), NAME_LENGTH_RULE]}>
            <Input placeholder="请输入真实姓名" />
          </Form.Item>
          <Form.Item name="idCard"label="身份证号"rules={[REQUIRED_RULE("请填写身份证号"),{ validator: (rule, val) => verifyIdentityNo(rule, val, () => { }) }, ]}>
            <Input placeholder="请输入身份证号" />
          </Form.Item>
          <Form.Item name="phone"label="手机号" rules={[ REQUIRED_RULE("请填写手机号"), { validator: (rule, val) => verifyMobile(rule, val) },]}>
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item label="验证码" className="mb-10">
            <Form.Item name="randCode"style={{ display: "inline-block", width: "60%" }}rules={[REQUIRED_RULE("填写验证码"),{len: 4, message: "验证码为4位",},]}>
              <Input size="large" prefix={<PictureOutlined />} placeholder="4位验证码"maxLength={4}allowClear/>
            </Form.Item>
            <div
              style={{
                display: "inline-block",
                width: "38%",
                height: "36px",
                marginLeft: "2%",
              }}
            >
              <button
                type="button"
                className="register-code-btn"
                onClick={getCode}
              >
                <img
                  alt="验证码"
                  src={code}
                  className="img-res"
                  onError={() => {
                    setCode("");
                  }}
                />
              </button>
            </div>
          </Form.Item>
          {/* <Form.Item > */}
          <div style={{
            width: "100%",
            margin: "30px 0"
          }}>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              block
              loading={loading}
            >
              注册
            </Button></div>
          {/* </Form.Item> */}
        </Form>
      </Card>
    </Layout>
  );
}

export default observer(Register);
